<template>
	<view class="date-time">
		<view class="time-box"
		 :class="[{'active':dataAll.start === item.time || dataAll.end === item.time}, {'pitch-on':index > s && index < e}, {'new-show': item.newShow}]"
		 v-for="(item, index) in timeData" @click="clickTime(item)" :key="index">
			<view class="time-txt">{{item.time}}</view>
			<view class="time-maths">{{item.timeMaths}}</view>
		</view>
	</view>
</template>

<script>
export default{
	data() {
		return {
			time:"",
			s: 0,
			e: 0,
			dataAll: {
				start: null,
				end: null
			},
			timeData: [
				{'time': '02：00~03：00', 'timeMaths': "可预约"},
				{'time': '03：00~04：00', 'timeMaths': "可预约"},
				{'time': '04：00~05：00', 'timeMaths': "可预约"},
				{'time': '05：00~06：00', 'timeMaths': "可预约"},
				{'time': '06：00~07：00', 'timeMaths': "可预约"},
				{'time': '07：00~08：00', 'timeMaths': "可预约"},
				{'time': '08：00~08：00', 'timeMaths': "可预约"},
				{'time': '09：00~10：00', 'timeMaths': "可预约"},
				{'time': '10：00~11：00', 'timeMaths': "可预约"},
				{'time': '11：00~12：00', 'timeMaths': "可预约"},
				{'time': '12：00~13：00', 'timeMaths': "可预约"},
				{'time': '13：00~14：00', 'timeMaths': "可预约"},
				{'time': '14：00~15：00', 'timeMaths': "可预约"},
				{'time': '15：00~16：00', 'timeMaths': "可预约"},
				{'time': '16：00~17：00', 'timeMaths': "可预约"},
				{'time': '17：00~18：00', 'timeMaths': "可预约"},
				{'time': '18：00~19：00', 'timeMaths': "可预约"},
			]
		}
	},
	props: {
		startTime: {
			type: String,
			default: '8：00'
		},
		endTime: {
			type: String,
			default: '20：00'
		},
		disableTime: {
			type: Array,
			default: false
		},
		
	},

	mounted() {
		/* 获取展示的时间段 */
		let startTimeIndex = this.timeData.findIndex((item)=>{
			return item.time == this.startTime
		})
		let endTimeIndex = this.timeData.findIndex((item)=>{
			return item.time == this.endTime
		})
		this.timeData = this.timeData.slice(startTimeIndex, endTimeIndex)
	
	},
	methods:{
		clickTime(item) {
			console.log(item)
			this.time=item.time
			this.$emit("textChange",this.time)
			
		},
		timeDataShow() {
			for(let i = 0; i < this.timeData.length; i++) {
				if(this.s <= i && this.e >= i) {
					if(this.timeData[i].newShow) {
						return true
					}
				}
			}
		}
	}
}
</script>

<style lang="less" scoped>
	.date-time{
		background-color: #FFFFFF;
		height: ;
		
	}
	.time-box{
		line-height: 72rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
		.time-txt{
			color: #333333;
			font-size: 34rpx;
		}
		.time-maths{
			color: #BCCADC;
			font-size: 28rpx;
		}
		.img{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.time-box.active {
		background-color: #EEF3FF;
		border-radius: 20rpx;
		.time-txt{
			color: #376EF1;
			font-size: 38rpx;
		}
		.time-maths{
			color: #BCCADC;
			font-size: 28rpx;
		}
	}
	.time-box.pitch-on{
		background-color: #F9FBFF;
		.time-txt{
			color: #B2C9FF;
			font-size: 34rpx;
		}
	}
	.time-box.new-show{
		background-color: #F6F6F6;
		// border-radius: 20rpx;
		.time-txt{
			color: #78839E;
			font-size: 32rpx;
		}
		.time-maths{
			color: #78839E;
			font-size: 32rpx;
		}
	}
</style>
